<template>
  <div id="app">
    <ul id="nav">
      <router-link
        :to="route.path"
        v-for="route in $router.options.routes"
        :key="route.name"
        tag="li"
        >About</router-link
      >
    </ul>
    <div class="content">
      11
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  nam: "App",
  mounted() {
    console.log(this.$route);
    console.log(this.$router);
  },
};
</script>
<style lang="less">
#app {
  display: flex;
  justify-content: space-between;
  #nav {
    background: #ccc;
    width: 250px;
    list-style: none;
    li {
      margin: 10px 0;
      text-align: center;
    }
    .router-link-active {
      color: rgb(153, 0, 255);
    }
  }
  .content {
    flex: 1;
  }
}
</style>
